import { useState } from 'react'
import PictureCard from './components/PictureCard'
import {generateAudio} from './lib/audio'
import './app.css'
export default function App() {
  const [audio, setAudio] = useState('')
  const [sentence, setSentence] = useState('')
  const [imgPreview, setImgPreview] = useState(undefined as string | undefined)
  const [detailExpand, setDetailExpand] = useState(false)
  const [word, setWord] = useState('请上传图片')
  const [explaination,setExplaination] = useState('')
  const [example_replys,setExampleReplys] = useState([])
  const userPrompt = `
  分析图片内容,找出最能描述该图片的一个单词,尽量选择更简单的A1~A2级单词。
  返回json数据
  {
    "image_description":"图片描述",
    "representative_word":"最能描述该图片的单词"
    "example_sentence":"结合英文单词和图片描述,给出一个简单的例句"
    "explaination":"结合图片分析解释英文单词,段落以Look at ...开头,将段落分句,每句单独一行,解释的最后给日常生活有关的问句"
    "example_replys":["根据explaination给出的回复1","根据explaination给出的回复2"]
    "chinese_explaination":"对explaination的中文解释"
  }
  `
  const submit = async(data: string) => {
    // console.log(data);
    setImgPreview(data)
    // 图片分析
    const endpoint = 'https://api.moonshot.cn/v1/chat/completions'
    const headers = {
      'Authorization': `Bearer ${import.meta.env.VITE_KIMI_API_KEY}`,
      'Content-Type': 'application/json'
    }
    setWord('分析中...')

    const response = await fetch(endpoint, {
      method: 'POST',
      headers,
      body: JSON.stringify({
        model: "moonshot-v1-8k-vision-preview",
        messages: [
          {
            role: 'user',
            content: [
              {
                type: 'image_url',
                image_url: {
                  url: data
                }
              },
              {
                type: 'text',
                text: userPrompt
              }
            ]
          }
        ]
      })
    })
    const res = await response.json()
    setWord(JSON.parse(res.choices[0].message.content).representative_word)
    setExplaination(JSON.parse(res.choices[0].message.content).explaination)
    setSentence(JSON.parse(res.choices[0].message.content).example_sentence)
    setExampleReplys(JSON.parse(res.choices[0].message.content).example_replys)
    const audioUrl = await generateAudio(JSON.parse(res.choices[0].message.content).representative_word)
    setAudio(audioUrl)
  }

  return (
    <div className='container'>
      <PictureCard word={word} submit={submit} audio={audio} />
      <div className="output">
        <div>{sentence}</div>
        <div className="detail">
          <button onClick={() => setDetailExpand(!detailExpand)}>Talk about it</button>

          {
            !detailExpand ?
              <div className='fold'></div> :
              (
                <div className="expand">
                  <img src={imgPreview} alt="" />
                  <div className="explaination">
                    <p>{explaination}</p>
                  </div>
                  <div className="reply">
                    <p>{example_replys[0]}</p>
                    <p>{example_replys[1]}</p>
                  </div>
                </div>
              )
          }


        </div>
      </div>
    </div>
  )
}
